<template>
  <div>
    <div
      class="tabs-div"
      :class="[
        `${isFixed ? 'tabs-fixed' : 'tabs-relative'}`,
        `${unlined ? ' unlined ' : ''}`,
      ]"
      :style="[
        `height:${height}rpx`,
        `padding:0 ${padding}rpx`,
        `background:${bgColor}`,
        `top:${isFixed ? top + 'px' : 'auto'}`,
      ]"
    >
      <div
        v-for="(item, index) in tabs"
        :key="index"
        class="tabs-item"
        :style="{ width: itemWidth }"
        @click="swichTabs(index)"
      >
        <div
          class="tabs-title"
          :class="[
            `${tabIndex == index ? 'tabs-active' : ''}`,
            `${item.disabled ? 'tabs-disabled' : ''}`,
          ]"
          :style="[
            `color:${tabIndex == index ? selectedColor : color}`,
            `font-size:${size}`,
            `font-weight:${bold && tabIndex == index ? 'bold' : 'normal'}`,
          ]"
        >
          {{ item.name }}
        </div>
      </div>
      <div
        class="tabs-slider"
        :style="[
          `transform:translateX(${scrollLeft}px)`,
          `width:${sliderWidth}rpx`,
          `height:${sliderHeight}rpx`,
          `bottom: ${bottom}`,
          `margin-bottom: ${
            bottom == '50%' ? '-' + sliderHeight / 2 + 'rpx' : 0
          }`,
          `background: ${DIYTHEME?.host_bg2}`,
        ]"
      ></div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "tabs",
};
</script>
<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import { storeToRefs } from "pinia";
import { useConfig } from "@/store";
const { DIYTHEME } = storeToRefs(useConfig());

const props = withDefaults(
  defineProps<{
    tabs?: Array<{
      name: string;
      type: string;
      disabled?: boolean;
    }>;
    height?: number | string;
    padding?: number;
    isFixed?: boolean;
    bgColor?: string;
    top?: number | string;
    unlined?: boolean;
    tabIndex?: number;
    sliderWidth?: number;
    sliderHeight?: number;
    bottom?: number | string;
    itemWidth?: number | string;
    color?: string;
    selectedColor?: string;
    size?: string;
    bold?: boolean;
  }>(),
  {
    tabs: () => {
      return [];
    },
    height: 80,
    padding: 0,
    isFixed: false,
    bgColor: "#ffffff",
    top: 0,
    unlined: false,
    tabIndex: 0,
    sliderWidth: 68,
    sliderHeight: 15,
    bottom: 0,
    itemWidth: "25%",
    color: "#333333",
    selectedColor: "#5677fc",
    size: 'var(--base-size-default)',
    bold: false,
  }
);

const emit = defineEmits(["change"]);

// 点击标题切换当前页时改变样式
const swichTabs = (index: number) => {
  let item = props.tabs[index];
  if (item && item.disabled) return;
  if (props.tabIndex == index) {
    return false;
  } else {
    emit("change", {
      index: Number(index),
    });
  }
};

const winWidth = ref<number>(0);

const scrollLeft = ref<number>(0);

const checkCor = () => {
  let tabsNum = props.tabs.length;
  let padding = (winWidth.value / 750) * Number(props.padding);
  let width = winWidth.value - padding * 2;
  let left =
    (width / tabsNum - (winWidth.value / 750) * props.sliderWidth) / 2 +
    padding;
  scrollLeft.value = left;
  if (props.tabIndex > 0) {
    scrollLeft.value = left + (width / tabsNum) * props.tabIndex;
  }
};

onMounted(() => {
  uni.getSystemInfo({
    success: (res) => {
      winWidth.value = res.windowWidth;
      checkCor();
    },
  });
});

watch(
  () => props.tabIndex,
  (newValue, oldValue) => {
    checkCor();
  },
  { deep: true }
);

watch(
  () => props.tabs,
  (newValue, oldValue) => {
    checkCor();
  },
  { deep: true }
);
</script>

<style scoped>
.tabs-div {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 9999;
}

.tabs-relative {
  position: relative;
}

.tabs-fixed {
  position: fixed;
  left: 0;
}

.tabs-fixed::before,
.tabs-relative::before {
  content: "";
  position: absolute;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  bottom: 0;
  right: 0;
  left: 0;
}

.unlined::before {
  border-bottom: 0 !important;
}

.tabs-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tabs-disabled {
  opacity: 0.6;
}

.tabs-title {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  white-space: nowrap;
}

.tabs-active {
  transition: all 0.15s ease-in-out;
}

.tabs-slider {
  border-radius: 40rpx;
  position: absolute;
  left: 0;
  top: 45rpx;
  transition: all 0.15s ease-in-out;
  z-index: 0;
  opacity: 0.2;
}
</style>
